import {Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {PullToRefresh, TabBar} from 'antd-mobile';
import Icon from '../../../component/Icon';
import Store from './Store';
import Bookcase from './Bookcase';
import Me from './Me';
import styles from './css/Home.css';

function switchTab(dispatch, tab) {
	dispatch({
		type: 'home/setTab',
		tab
	});
}

class Home extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let {tab} = state;

		return (
			<TabBar 
				barTintColor='white' 
				tintColor='#108ee9' 
				unselectedTintColor='#888' 
				hidden={false} 
				prefixCls='am-tab-bar' 
				noRenderContent={false} 
				prerenderingSiblingsNumber={1} 
				tabBarPosition='bottom' 
			>
				<TabBar.Item
					key='store'
					title='书店' 
					icon={<Icon type={require('../asset/svg/store.svg')} />}
					selectedIcon={<Icon type={require('../asset/svg/store.svg')} />}
					selected={tab == 'store'} 
					onPress={() => switchTab(dispatch, 'store')}
				>
					<Store />
				</TabBar.Item>
				<TabBar.Item
					key='bookcase'
					title='书柜' 
					icon={<Icon type={require('../asset/svg/bookcase.svg')} />}
					selectedIcon={<Icon type={require('../asset/svg/bookcase.svg')} />}
					selected={tab =='bookcase'} 
					onPress={() => switchTab(dispatch, 'bookcase')}
				>
					<Bookcase />
				</TabBar.Item>
				<TabBar.Item
					key='me'
					title='我的' 
					icon={<Icon type={require('../asset/svg/me.svg')} />}
					selectedIcon={<Icon type={require('../asset/svg/me.svg')} />}
					selected={tab == 'me'} 
					onPress={() => switchTab(dispatch, 'me')}
				>
					<Me />
				</TabBar.Item>
			</TabBar>
		);
	}
	
}

export default connect((state) => ({
	state: {
		...state.home,
		loading: state.loading.models.home
	}
}))(Home);
